<!--
 * @Description: 
 * @Date: 2024-05-14 10:24:45
 * @LastEditTime: 2024-10-29 09:30:06
-->
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
}
</route>
<template>
  <view class="relative bg-#F4F5F9" :style="{ marginTop: safeAreaInsets?.top + 'px' }">
    <view
      class="bg-#fff h-83rpx flex items-center"
      v-if="userStore.userInfo.currentRole != 'leader'"
    >
      <view
        class="ml-20rpx p-6rpx text-26rpx font-bold rounded-20rpx border border-solid text-#0165B7 inline-flex justify-start items-center pl-20rpx"
        @click="popupShow = true"
      >
        <text>{{ customShow }}</text>
        <wd-icon name="caret-down-small" size="24px"></wd-icon>
      </view>
    </view>
    <!-- <view>当前选中项：{{ customShow }}</view>
    <wd-select-picker
      v-model="value"
      use-default-slot
      type="radio"
      :columns="columns"
      @confirm="handleConfirm"
    >
      <wd-button>默认唤起项</wd-button>
    </wd-select-picker> -->
    <!-- <view class="px-30rpx py-30rpx flex justify-center items-center"> -->
    <!-- <view class="flex-1">
        <wd-select-picker
          v-model="lessee"
          type="radio"
          use-default-slot
          :columns="lesseeList"
          @change="handleChange"
          @confirm="handleConfirm"
        >
          <view class="flex items-center">
            <view class="text-#000 font-550 mr-10rpx text-26rpx">{{ customShow }}</view>
            <view class="uptriangle"></view>
          </view>
        </wd-select-picker>
      </view>
      <view class="font-550">检察之窗</view>
      <view class="flex-1"></view>
    </view> -->

    <view>
      <wd-swiper
        class="rounded-none"
        :list="swiperList"
        autoplay
        :current="1"
        :indicator="true"
        @click="handleQuan"
        :display-multiple-items="0"
      ></wd-swiper>
    </view>
    <view class="py-20rpx px-30rpx flex items-center text-26rpx">
      <view v-if="userStore.userInfo.nickname == ''">
        <text class="mr-20rpx font-550">欢迎您，请先认证</text>
        <wd-button size="small" @click="handleLogin">点击登录</wd-button>
      </view>
      <view v-else>
        <text class="mr-20rpx font-550">
          {{ ciyName }}欢迎您，{{ userStore.userInfo.nickname }}
        </text>
        <wd-tag type="primary" mark>认证成功</wd-tag>
      </view>
    </view>
    <view class="w-screen py-20rpx flex">
      <view
        class="h-full flex-1 flex flex-col items-center"
        v-for="item in menuList"
        :key="item.title"
        @click="handleMenuClick(item.url)"
      >
        <image :src="item.src" class="w-60rpx h-60rpx mb-10rpx"></image>
        <text class="text-24rpx font-550">{{ item.title }}</text>
      </view>
    </view>
    <view class="h-160rpx">
      <swiper
        class="swiper"
        :indicator-dots="false"
        :autoplay="true"
        :vertical="true"
        :interval="2000"
      >
        <swiper-item
          v-for="item in WordList"
          class="bg-#F4F5F9"
          :key="item.id"
          @click="handleArticle(item.id)"
        >
          <view class="w-100% h-100% flex p-20rpx box-border">
            <image class="w-240rpx h-full mr-20rpx" :src="baseUrl + item.imageUrl"></image>
            <view class="flex-1 text-30rpx overflow-hidden indent-2ch ellipsis-multiline">
              {{ item.title }}
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <view class="w-screen p-20rpx overflow-hidden box-border bg-#F4F5F9">
      <view class="text-36rpx font-550 text-#254C73 mb-20rpx">热门服务</view>
      <view class="grid grid-rows-4 grid-cols-2 gap-20rpx">
        <view
          class="h-100rpx bg-#0063AF rounded-15rpx"
          v-for="(item, index) in skipList"
          :key="index"
          @click="handleSkip(item.url, item.title)"
        >
          <view class="h-full flex items-center p-10rpx box-border">
            <view class="flex-1 flex flex-col h-full justify-evenly">
              <text class="text-24rpx text-#fff">{{ item.title }}</text>
              <text class="text-20rpx text-#B6BCC0">{{ item.msg }}</text>
            </view>
            <image class="w-60rpx h-60rpx" :src="item.src" mode="scaleToFill" />
          </view>
        </view>
      </view>
      <!-- <view
        class="text-36rpx font-550 text-#254C73 my-20rpx"
        v-if="userStore.userInfo.currentRole != 'leader'"
      >
        区县速达
      </view> -->
    </view>
    <view
      class="sticky bottom-0 px-40rpx py-20rpx w-full flex box-border justify-between items-center bg-#fff"
    >
      <image class="w-80rpx h-80rpx rounded-50% mr-20rpx" :src="zg"></image>
      <view class="flex flex-col">
        <text class="text-28rpx text-#000">延安检察</text>
        <text class="text-22rpx text-#9A9B9F">推行检务公开，宣传检察职能</text>
      </view>
      <button
        @click="handleClick"
        class="w-180rpx h-60rpx text-28rpx mr-0rpx border border-solid text-#31A970 border-#31A970 flex items-center justify-center"
      >
        关注
      </button>
    </view>
  </view>
  <!-- <wd-popup
    v-model="popupShow"
    position="bottom"
    custom-style="height: 200px;"
    @close="handleClose"
  >
    <view class="py-20rpx px-30rpx">
      <view class="flex justify-center items-center">
        <text class="flex-1 text-center">取消</text>
        <text class="w-70% text-34rpx text-center text-#000 font-bold">选择区县</text>
        <text class="flex-1 text-center text-#0165B7 font-bold">确定</text>
      </view>
    </view>
  </wd-popup> -->
  <wd-action-sheet v-model="popupShow" @close="handleClose" z-index="1000" title="选择区县">
    <view class="py-20rpx px-30rpx">
      <!-- <view class="flex justify-center items-center mb-30rpx">
        <text class="flex-1 text-center">取消</text>
        <text class="w-70% text-34rpx text-center text-#000 font-bold">选择区县</text>
        <text class="flex-1 text-center text-#0165B7 font-bold">确定</text>
      </view> -->
      <view
        class="grid grid-rows-7 grid-cols-2 gap-10rpx"
        v-if="userStore.userInfo.currentRole != 'leader'"
      >
        <view
          class="h-120rpx border-rd-10rpx overflow-hidden"
          v-for="item in lesseeList"
          :key="item.value"
          :class="{ lesseeItem: item.value == lessee }"
          @click="handleConfirm(item.value, item.label)"
        >
          <image class="w-full h-full" :src="item.url" />
          <!-- <text class="absolute right-10rpx top-40% text-#fff text-20rpx">{{ item.label }}</text> -->
        </view>
      </view>
    </view>
  </wd-action-sheet>
</template>

<script lang="ts" setup>
import {
  loginApi,
  getTenantIdByName,
  getIdByNames,
  changeIdBy,
  getOperateListAPI,
  getWordListAPI,
  getUserId,
  getUserListAPI,
} from '@/service/index/foo'
import { useUserStore } from '@/store'
import PLATFORM from '@/utils/platform'
import icon1 from '../../static/home/icon1.png'
import icon2 from '../../static/home/icon2.png'
import icon3 from '../../static/home/icon3.png'
import icon4 from '../../static/home/icon4.png'
import skip1 from '../../static/home/skip1.png'
import skip2 from '../../static/home/skip2.png'
import skip3 from '../../static/home/skip3.png'
import skip4 from '../../static/home/skip4.png'
import skip5 from '../../static/home/skip5.png'
import skip6 from '../../static/home/skip6.png'
import skip7 from '../../static/home/skip7.png'
import skip8 from '../../static/home/skip8.png'
import zg from '../../static/home/gz.png'
import { useToast } from 'wot-design-uni'
defineOptions({
  name: 'Home',
})

// 获取屏幕边界到安全区域距离
const baseUrl = import.meta.env.VITE_SERVER_BASEURL
const userStore = useUserStore()
const ciyName = ref('')
const { safeAreaInsets } = uni.getSystemInfoSync()
const selectTop = wx.getMenuButtonBoundingClientRect()
console.log(
  uni.getMenuButtonBoundingClientRect().height + uni.getMenuButtonBoundingClientRect().top,
  77777,
)
const customShow = ref('延安')
const lesseeList = reactive([])
const lessee = ref<string>('')
const toast = useToast()
const popupShow = ref(false)
onLoad(() => {
  wx.setVisualEffectOnCapture({
    visualEffect: 'hidden',
  })

  getIdByNames()
    .then((res) => {
      try {
        lessee.value = userStore.userInfo.tenantId + '' || '167'
        lesseeList.length = 0

        res.data.list.forEach((item) => {
          if (userStore.userInfo.tenantId == item.id) {
            ciyName.value = item.name
          }
          if (item.packageId != 0) {
            lesseeList.unshift({
              value: item.id + '',
              label: item.name,
              url: baseUrl + item.contactProcuratorate,
            })
          }
        })
        customShow.value = lesseeList.filter((item) => {
          return item.value == lessee.value
        })[0].label
      } catch (error) {
        console.log(error)
      }
    })
    .then((res) => {
      initData()
    })
})
const swiperList = ref([])
const swiperLists = ref([])
const WordList = ref([])
const menuList = ref([
  { title: '查询服务', src: icon1, url: '/pages/inquiryService/index' },
  { title: '电子送达', src: icon2, url: '/pages/ElectronicDelivery/index' },
  { title: '预约服务', src: icon3, url: '/pages/visit/index' },
  { title: '我的申请', src: icon4, url: '/pages/menu/subRecord/index' },
])
const skipList = ref([
  {
    title: '信访服务',
    msg: '倾听解决群众诉求',
    src: skip1,
    url: '/pages/menu/petitione/index',
  },
  {
    title: '益心为公',
    msg: '守护群众美好生活',
    src: skip2,
    url: '/pages/menu/publicBenefit/index',
  },
  {
    title: '羁押审查',
    msg: '羁押必要性审查',
    src: skip3,
    url: '/pages/menu/investigate/index',
  },
  {
    title: '视频接访',
    msg: '搭起信访便民“连心桥”',
    src: skip4,
    url: '/pages/menu/videoCall/index',
  },
  {
    title: '12309热线',
    msg: '服务群众的检察名片',
    src: skip5,
    url: '/pages/menu/hotLine/index',
  },
  {
    title: '普法课堂',
    msg: '法律知识伴你行',
    src: skip6,
    url: '/pages/menu/popularizeLaw/index',
  },
  {
    title: '在线留言',
    msg: '开门纳谏接受监督',
    src: skip7,
    url: '/pages/menu/leaveMessage/index',
  },
  {
    title: '陕甘宁边区检察史陈列室',
    msg: '（各院检察品牌）',
    src: skip8,
    url: '/pages/menu/showRoom/index',
  },
])

watch(popupShow, (newVal) => {
  if (newVal) {
    uni.hideTabBar()
  } else {
    uni.showTabBar()
  }
})
function initData() {
  return new Promise((resolve, reject) => {
    getOperateListAPI({ pageSize: 10, pageNo: 1 })
      .then((res) => {
        swiperList.value.length = 0
        swiperLists.value.length = 0
        res.data.list.forEach((item) => {
          swiperList.value.push(baseUrl + item.image)
          swiperLists.value.push(item)
        })
      })
      .then((res) => {
        getWordListAPI({ pageSize: 10, pageNo: 1 }).then((res) => {
          WordList.value.length = 0
          res.data.list.forEach((item) => {
            WordList.value.push(item)
          })
        })
        //  getUserRoleId()
        resolve(true)
      })
  })
}
/**
 * @description: 弹出层关闭
 * @return {*}
 */
function handleClose() {
  popupShow.value = false
}
/**
 * @description: 菜单栏跳转
 * @param {*} url
 * @return {*}
 */
function handleMenuClick(url) {
  // if (!Boolean(userStore.userInfo.token)) {
  //   uni.reLaunch({ url: '/pages/login/index' })
  // } else {
  //   if (!url) {
  //     return toast.warning('暂未开放')
  //   }
  //   uni.navigateTo({
  //     url,
  //   })
  // }
  uni.navigateTo({
    url,
  })
}
function handleArticle(id) {
  if (!userStore.userInfo.token) {
    uni.reLaunch({ url: '/pages/login/index' })
  } else {
    uni.navigateTo({
      url: `/pages/home/article?id=${id}`,
    })
  }
}

function handleClick(e) {
  uni.navigateTo({
    url: '/pages/home/gz',
  })
}
function handleQuan(e) {
  if (!userStore.userInfo.token) {
    uni.reLaunch({ url: '/pages/login/index' })
  } else {
    const target = swiperLists.value[0]
    if (target.outFileUrl) {
      uni.navigateTo({
        url: `/pages/home/outArticle?url=${target.outFileUrl}`,
      })
    } else if (target.inFileUrl) {
      uni.navigateTo({
        url: `/pages/home/article?id=${target.inFileUrl}`,
      })
    }
  }
}
function handleSkip(url, title) {
  if (!userStore.userInfo.token) {
    uni.reLaunch({ url: '/pages/login/index' })
  } else {
    uni.navigateTo({
      url,
    })
  }
}

function handleChange({ value }) {}
function handleConfirm(value, name) {
  ciyName.value = name
  toast.loading({
    msg: '切换中...',
  })
  lessee.value = value
  customShow.value = lesseeList.filter((item) => {
    return item.value == value
  })[0].label

  changeIdBy({ phone: userStore.userInfo.phone, tenantId: value }).then(async (res) => {
    userStore.setUserInfo({ tenantId: value, token: res.data.accessToken as string })
    await initData()
    toast.success({
      msg: '切换成功',
    })
  })
}
function handleLogin() {
  uni.reLaunch({ url: '/pages/login/index' })
}
function getUserRoleId() {
  getUserId({ pageNo: 1, pageSize: 10 }).then((res) => {
    const userList = res.data.list
    if (userList && userList.length > 0) {
      const zhuanId = userList.filter((item) => {
        return item.name == '转派人'
      })
      zhuanId.length > 0 ? userStore.setUserInfo({ zhuanId: zhuanId[0].id }) : null
      const jianChaId = userList.filter((item) => {
        return item.name == '检察官'
      })
      jianChaId.length > 0 ? userStore.setUserInfo({ jianChaId: jianChaId[0].id }) : null
    }
  })
}
</script>

<style lang="scss" scoped>
::v-deep .wd-swiper,
::v-deep .wd-swiper__track {
  border-radius: 0 !important;
}

::v-deep .wd-overlay,
::v-deep .wd-popup {
  z-index: 99 !important;
}

::v-deep .wd-action-sheet__header {
  font-weight: bold !important;
}

.main-title-color {
  color: #d14328;
}

.swiper-item {
  display: block;
  height: 100%;
  text-align: center;
}

.uptriangle {
  width: 0;
  height: 0;
  border-top: 5px solid #000;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

.ellipsis-multiline {
  display: -webkit-box;
  height: fit-content;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  //border: 1px solid #0165b7;
}

image {
  will-change: transform;
}

.lesseeItem {
  border: 4rpx solid #42aafa;
  box-shadow:
    6rpx 6rpx 6rpx rgba(11, 176, 241, 0.1),
    0 0 6rpx rgba(11, 176, 241, 0.1),
    0 0 6rpx rgba(11, 176, 241, 0.1);
}
</style>
